<template>
	<view class="purchase-history">
		<view class="purchase-history__list" v-if="payleMemberPurchaseRecordList.length">
			<view class="list-item" :class="item.levelStatus==1?'failed-box':'' "
				v-for="(item, index) in payleMemberPurchaseRecordList" :key="index"
				:style="{ backgroundImage: 'url(http://8.134.96.187:7110/group1/image/bg-quanyi8568161412576397785.png)' }">
				<view class="list-item__head flex-row-between">
					<view class="level">{{ item.vipName }}</view>
					<view class="stauts stauts--a" v-if="item.levelStatus == 2">生效中</view>
					<view class="stauts stauts--b" v-if="item.levelStatus == 1">已过期</view>
					<view class="stauts stauts--b" v-if="item.levelStatus == 3">未生效</view>
				</view>
				<view class="list-item__body flex-row-between">
					<view>支付时间：{{ item.createTime }}</view>
					<view class="mb20">
						有效期：
						<text>{{ item.startTime }}至{{ item.expirationTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<Upgrading v-else></Upgrading>
	</view>
</template>

<script>
	// import zpMixins from '@/uni_modules/zp-mixins/index';
	import Upgrading from '@/components/upgrading/upgrading';
	import {
		getPayleMemberPurchaseRecord
	} from '../../../../api/marketing/payMember';
	export default {
		components: {
			Upgrading
		},
		data() {
			return {
				payleMemberPurchaseRecordList: [],
				payleMemberPurchaseRecord: {},
				config: {
					current: 1
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			this.getPayleMemberPurchaseRecord();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.getPayleMemberPurchaseRecord();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			async getPayleMemberPurchaseRecord() {
				try {
					const res = await getPayleMemberPurchaseRecord(this.config);
					let payleMemberPurchaseRecord = res.data || {};
					let payleMemberPurchaseRecordList = payleMemberPurchaseRecord.records || [];
					this.setData({
						payleMemberPurchaseRecord,
						payleMemberPurchaseRecordList: [...this.payleMemberPurchaseRecordList, ...
							payleMemberPurchaseRecordList
						]
					});
					let mes = ''
					payleMemberPurchaseRecordList.length && payleMemberPurchaseRecordList.forEach(i => {
						if (i.expireTip === true) {
							mes = mes ? mes + ',' + i.vipName : i.vipName
						}
					})
					console.log(mes, 'mesmesmesmes')
					// mes && uni.showToast({
					// 	title: mes + '即将过期',
					// 	icon: 'none',
					// 	duration: 2500
					// })
					this.config.current++;
				} catch (error) {}
			},

			toGetRecord(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../get_record/get_record?id=' + id
				});
			}
		}
	}
</script>
<style lang="less" scoped>
	@import "../../../../commin/flex.less";

	/*颜色*/
	/*文字溢出隐藏*/
	/* grid是（布局 */
	/* 字体大小*/
	/* 圆角 */
	/* 内边距 */
	/* 虚边框 */
	/* 数组  */
	.record-in .aaa1 {
		color: #909399;
	}

	.record-in .aaa2 {
		color: #1487fa;
	}

	.record-in .aaa3 {
		color: #f7a14a;
	}

	.record-in .aaa4 {
		color: #72c23d;
	}

	.record-in .aaa5 {
		color: #606266;
	}

	page {
		background-color: #f5f7fa;
		line-height: 1;
	}

	.purchase-history__list {
		padding: 16rpx 24rpx;
	}

	.purchase-history__list .list-item {
		border-radius: 20rpx;
		padding: 0 32rpx 34rpx;
		margin-bottom: 16rpx;
		height: 210rpx;
		background-size: 100% 100%;
		position: relative;
	}

	.failed-box {
		opacity: 0.6;
	}

	.purchase-history__list .list-item__head {
		height: 100rpx;
	}

	.purchase-history__list .list-item__head .level {
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #D4BAA2;
	}

	.purchase-history__list .list-item__head .stauts {
		width: 110rpx;
		height: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		border-radius: 16rpx;
	}

	.purchase-history__list .list-item__head .stauts--a {
		background: linear-gradient(329deg, #6C5B41 0%, #27241E 100%, #3E3C3A 100%);
		border-radius: 0rpx 20rpx 0rpx 20rpx;
		opacity: 1;
		box-shadow: #f5efef 0rpx 0rpx 8rpx;
		border-image: linear-gradient(19deg, rgba(212.4999949336052, 212.4999949336052, 212.4999949336052, 1), rgba(212.4999949336052, 212.4999949336052, 212.4999949336052, 0)) 1 1;
		position: absolute;
		top: 9rpx;
		right: 0rpx;
		color: #FFE066;
	}

	.purchase-history__list .list-item__head .stauts--b {
		background: linear-gradient(328deg, #56595E 0%, #84888D 100%);
		border-radius: 0rpx 20rpx 0rpx 20rpx;
		opacity: 1;
		box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(0, 0, 0, 0.302);
		position: absolute;
		top: 9rpx;
		right: 0rpx;
		color: #FFFFFF;
	}


	.purchase-history__list .list-item__body {
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.purchase-history__list .list-item__body .mb20 {
		margin-top: 20rpx;
	}

	.purchase-history__list .list-item__body_right {
		font-size: 24rpx;
		font-weight: bold;
		color: #fc724c;
	}

	.purchase-history__list .list-item__body_right text {
		font-size: 34rpx;
	}

	.purchase-history__list .list-item__btn {
		font-size: 24rpx;
		color: #1487fa;
	}

	.purchase-history__list .list-item__btn .arrows_r {
		width: 12rpx;
		height: 12rpx;
		border-top: 1px solid #1487fa;
		border-right: 1px solid #1487fa;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}
</style>